<template>
	<div class="OperationOverviewRight">
		<div class="OperationOverviewRight_lf">
			<div class="otovr_top">
				<div class="otovr_top_title">
					<span class="lytitle">实时充电功率</span>
					<div class="otovr_top_select">
						<a-space :size="8">
							<a-radio-group size="small" v-model:value="tabPosition" style="margin: 8px"
								@change="changeRegisterType">
								<!-- <a-radio-button value="gonglv">功率</a-radio-button> -->
								<!-- <a-radio-button value="chongdianliang">充电量</a-radio-button> -->
							</a-radio-group>
							<a-space size="“small" v-show="tabPosition == 'chongdianliang'">
								<span>今日</span>
								<a-divider style="color: #00a096" type="vertical" />
								<span>近30天</span>
								<a-divider type="vertical" />
								<span>近12月</span>
							</a-space>
							<!-- <a-date-picker v-show="tabPosition == 'gonglv'" style="width: 120px" size="small" v-model:value="value1" /> -->
						</a-space>
					</div>
				</div>
				<div class="otovr_top_echarts">
					<OperationOverviewRightEcharts v-if="tabPosition == 'gonglv'"
						:chartData="props.screenAlldata.todayTimeList" />
					<!-- <OperationOverviewRightEchartsBar v-if="tabPosition == 'chongdianliang'" /> -->
				</div>
			</div>
			<div class="otovr_bom">
				<div class="otovr_bom_title">
					<span class="lytitle">实时充电功率</span>
					<div>
						<OperationOverviewRightTable :realTimePowerList="props.screenAlldata.realTimePowerList">
						</OperationOverviewRightTable>
					</div>
				</div>
			</div>
		</div>
		<div class="OperationOverviewRight_rt">
			<rightindex :screenAlldata="props.screenAlldata"></rightindex>
		</div>
	</div>
</template>

<script lang="js" name="OperationOverviewRight" setup>
import { ref, reactive, computed, unref, watchEffect } from 'vue';
import OperationOverviewRightEcharts from './common/OperationOverviewRightEcharts.vue';
import OperationOverviewRightTable from './common/OperationOverviewRightTable.vue';

// import OperationOverviewRightEchartsBar from './common/OperationOverviewRightEchartsBar.vue';
import rightindex from './rightdiv/index.vue';

const props = defineProps({
	screenAlldata: Object,
});
const tabPosition = ref('gonglv');
// function changeRegisterType(e) {
//   tabPosition.value = e.target.value;
//   }
onMounted(() => {
	console.log('props.screenAlldata', props.screenAlldata);
});
</script>

<style lang="less" scoped>
:deep(.ant-picker),
:deep(.ant-input-number) {
	width: 100%;
}

/deep/.ant-radio-group {
	margin: 0px !important;
}

.lytitle {
	position: relative;
	padding-left: 10px;
	font-weight: 400;
	font-style: normal;
	color: #00a096;
	font-size: 18px;

	&::before {
		content: '';
		width: 4px;
		height: 16px;
		background-color: #00a096;
		position: absolute;
		left: 0;
		top: 6px;
	}
}

.OperationOverviewRight {
	background: white;
	width: 100%;
	box-sizing: border-box;
	padding: 20px;
	height: 100%;
	display: flex;

	.OperationOverviewRight_lf {
		width: 720px;
	}

	.OperationOverviewRight_rt {
		width: 500px;
	}

	.otovr_top_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;

		span:nth-of-type(1) {}

		.otovr_top_select {
			disflay: flex;
		}
	}

	.otovr_top_echarts {
		width: 100%;
		height: 300px;
	}
}
</style>
